@import "_util/color"
@import "_util/config"

// Config
support-for-ie = false
vendor-prefixes = webkit moz ms official

// Colors
color-default = #555
color-grey = #999
color-border = #ddd
color-link = #258fb8
color-background = #eee
color-sidebar-text = #777
color-widget-background = #ddd
color-widget-border = #ccc
color-footer-background = #262a30
color-mobile-nav-background = #191919
color-twitter = #00aced
color-facebook = #3b5998
color-pinterest = #cb2027
color-linkedin = #0077B5

// Fonts
font-sans = "Roboto", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif
font-serif = Georgia, "Times New Roman", serif
font-mono = "JetBrains Mono", "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
font-icon = FontAwesome
font-icon-path = "fonts/fontawesome-webfont"
font-icon-version = "4.7.0"
font-size = 16px
line-height = 1.6em
line-height-title = 1.1em

// Header
logo-size = 40px
subtitle-size = 16px
banner-height = 300px
banner-url = hexo-config("banner")

sidebar = hexo-config("sidebar")

// Layout
block-margin = 16px
article-padding = 20px
article-top-padding = 32px
article-side-padding = 40px
article-bottom-padding = 16px
mobile-nav-width = 280px
main-column = 9
sidebar-column = 3

mobile-article-side-padding = 28px

if sidebar and sidebar isnt bottom
  _sidebar-column = sidebar-column
else
  _sidebar-column = 0

// Styles
card-radius = 16px
inner-radius = 8px

// Transitions
trans-style = 0.15s ease-out

// Grids
column-width = 80px
gutter-width = 12px
columns = main-column + _sidebar-column
full-width = (column-width + gutter-width) * columns

// New Grid
page-width = 1200px
sidebar-width = 280px

// Media queries
mq-mobile = "screen and (max-width: 767px)"
mq-tablet = "screen and (min-width: 768px) and (max-width: 1023px)"
mq-normal = "screen and (min-width: 1024px)"

// Colors
color-N90 = alpha(white, 0.9)
color-N75 = alpha(white, 0.75)
color-N50 = alpha(white, 0.5) 
color-N30 = alpha(white, 0.3) 
color-N10 = alpha(white, 0.1)

color-B90 = alpha(black, 0.9)
color-B75 = alpha(black, 0.75)
color-B50 = alpha(black, 0.5)
color-B30 = alpha(black, 0.3)
color-B10 = alpha(black, 0.1)

:root

  --neut-L90: color-N90
  --neut-L75: color-N75
  --neut-L50: color-N50
  --neut-L30: color-N30
  --neut-L10: color-N10

  --banner-dim: alpha(#000, 0.2)

  --primary-hue: get-config-or-default("hue", 0)

  // Component Color
  _color_set({
    --primary: 0.75 0.14

    --nav-dropdown-bg: 0.20 0.02

    --page-background: 0.16 0.014
    --card-background: 0.25 0.02

    --main-title: color-N90

    --btn-bg: 0.38 0.04
    --btn-content: --neut-L75
    --btn-hover: 0.45 0.045
    --btn-active: 0.50 0.05
    --btn-content-hover: --btn-content

    --card-btn-bg: --card-background
    --card-btn-hover: 0.30 0.03
    --card-btn-active: 0.35 0.035
    --card-btn-icon: --primary

    --btn-text-hover: 0.20 0.02
    --btn-text-active: 0.17 0.017
    --btn-text-neutral-text: --neut-L75
    --btn-text-content: --primary
    --btn-text-light-text: --primary

    --timeline-dim-dot: 0.50 0.05

    --title-hover: --primary
    --title-active: 0.65 0.12

    --light-dot: --primary

    --tag-dot: 0.25 0.02

    --article-meta: color-N50
    --article-text: color-N75

    --info-name: color-N90
    --info-sub: color-N50

    --highlight-selection: 0.35 0.035
    --article-code-bg: 0.40 0.04
    --article-block: 0.20 0.02
    --link: --primary
    --link-hover-bg: 0.40 0.08
    --link-active-bg: 0.35 0.07
    --blockquote-bg: 0.20 0.02

    --color-picker-border: --primary
    --color-picker-thumb: --primary
    --color-picker-range: 0.40 0.04

    --badge-bg: 0.75 0.12
    --text-on-light: 0.25 0.02

    --pagenav-curr-bg: --primary
    --pagenav-curr-text: 0.25 0.02

    --widget-title: --main-title

    --archive-year: --neut-L75
    --archive-date: --neut-L50
    --archive-title: --neut-L75
    --archive-tags: --neut-L30
    --archive-dashline: --neut-L10

    --input-field: 0.20 0.02

    --primary-btn-bg: --primary
    --primary-btn-text: 0.25 0.02

    --enter-btn-bg: 0.20 0.02
    --enter-btn-hover: 0.30 0.03
    --enter-btn-active: 0.35 0.035

    --selection-bg: 0.40 0.08
    --code-block-selection-bg: 0.40 0.08

    --img-overlay: rgba(black, 0.1)
  })

  // Layout Setting
  --sidebar-width: sidebar-width

  // light/dark mode icon
  --display-light-icon: 0
  --display-dark-icon: 1

:root[theme='light']
  --card-background: white

  --banner-dim: none

  --neut-L90: color-B90
  --neut-L75: color-B75
  --neut-L50: color-B50
  --neut-L30: color-B30
  --neut-L10: color-B10

  _color_set({
    --primary: 0.70 0.14
    --main-title: color-B90

    --page-background: 0.95 0.01

    --nav-dropdown-bg: 0.98 0.005

    --article-meta: color-B50
    --article-text: color-B75

    --btn-bg: 0.95 0.025
    --btn-content: 0.55 0.12
    --btn-hover: 0.90 0.05
    --btn-active: 0.85 0.08

    --btn-text-hover: 0.95 0.025
    --btn-text-active: 0.98 0.01
    --btn-text-neutral-text: color-B75
    --btn-text-content: 0.70 0.14

    --info-name: color-B90
    --info-sub: color-B50

    --card-btn-hover: 0.98 0.005
    --card-btn-active: 0.90 0.03

    --title-active: 0.60 0.12

    --link-hover-bg: 0.95 0.025
    --link-active-bg: 0.90 0.05

    --tag-dot: --btn-content

    --article-code-bg: 0.95 0.02
    --blockquote-bg: 0.98 0.005

    --badge-bg: 0.95 0.02
    --text-on-light: 0.55 0.12


    --color-picker-range: 0.95 0.02

    --input-field: 0.98 0.005

    --enter-btn-bg: 0.98 0.005
    --enter-btn-hover: 0.96 0.015
    --enter-btn-active: 0.90 0.03
    --img-overlay: rgba(black, 0)

    --pagenav-curr-text: color-N90

    --primary-btn-text: color-N90

    --selection-bg: 0.90 0.05
  })

  --display-light-icon: 1
  --display-dark-icon: 0
